<template>
	<view class="groupDetail">
		<!-- 群成员展示 -->
		<view class="groupMenberList">
			<view class="menber" v-for="item in 14">
				<view class="image">
					<image src="http://120.24.190.211:80/static/1e.jpg"></image>
				</view>
				<view class="name">
					xxx
				</view>
			</view>
			
			<view class="addMenber">+</view>
		</view>
		<!-- 查看更多群成员 -->
		<view class="lookMoreMenber" v-if="menberList.length>14">查看更多群成员<u-icon name="arrow-right" color="#D0CCCC"></u-icon> </view>
		
		<!-- 资料详情信息列表 -->
		<view class="infoDetail">
			
				<u-cell-group>
					<u-cell rightIcon="arrow-right" :isLink="true">
						<view class="groupInfo" slot="title">
							<view class="title">群公告</view>
							<view class="content"><text class="text">公告内sadsadsadsa大撒大撒</text></view>
						</view>
					</u-cell>
				</u-cell-group>
		</view>
		
		
		<!-- 功能按钮区域 -->
		<view class="function-btn">
			<u-button type="success" :plain="true" text="加入群聊"></u-button>
			<u-button type="error"  text="删除并推出"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menberList:[]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.groupDetail{
		background-color: #E8E4E4;
		
	}
.groupMenberList{
	width: 100vw;
	
	display: flex;
	max-height: 480rpx;
	overflow: hidden;
	flex-wrap: wrap;
	justify-content: space-around;
	background-color: white;
	.addMenber{
		width: 120rpx;
		height: 120rpx;
		margin: 5rpx;
		border: 1px dashed #D0CCCC;
		border-radius: 10rpx;
		color: #D0CCCC;
		line-height: 120rpx;
		text-align: center;
		font-size: 50rpx;
	}
	.menber{
		width: 120rpx;
		height:150rpx;
		margin: 5rpx;
		
		.image{
			width: 100%;
			height:120rpx;
			border-radius:10rpx ;

			image{
				width: 100%;
				height: 100%;
				border-radius:10rpx ;
			}
		}
		.name{
			width: 100%;
			height: 30rpx;
			line-height: 30rpx;

			text-align: center;
		}
	}
}
.lookMoreMenber{
	width: 100%;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	color: #D0CCCC;
	display: flex;
	justify-content: center;
	background-color: white;
}
.infoDetail{
	margin-top:30rpx ;
	width: 100vw;
	background-color: white;
	
}
.groupInfo{
	width: 600rpx;
	max-height: 170rpx;

   	overflow: hidden;
   		text-overflow: ellipsis;
   		display: -webkit-box;
   		-webkit-line-clamp: 3;
   		-webkit-box-orient: vertical;
 
	.title{
		font-size: 35rpx;
	}
	.content{
		color: #B9B6B6;
		font-size: 25rpx;
	}
}

.function-btn{
	margin-top: 30rpx;
	width: 100vw;
	background-color: white;
	padding-top: 20rpx;
}
</style>
